/*
 * @Author: ice
 * @Date: 2019-01-09 14:14:26
 * @Last Modified by: Wilbur
 * @Last Modified time: 2019-03-06 16:08:18
 */
<template>
    <div class="container resource-type-lsit-wrap">
        <div class="operation-wrapper">
            <el-button
                type="primary"
                @click="handleRoute('resourceTypeEdit')"
                size="small"
            >创建资源类型</el-button>
        </div>
        <div class="content-wrapper">
            <div class="table-wrapper">
                <el-table
                    :data="tableData"
                    height="100%"
                    style="width: 100%;"
                >
                    <el-table-column
                        fixed="left"
                        header-align="left"
                        align="center"
                        :width="50"
                        label="序号"
                    >
                        <template slot-scope="scope">
                            <div class="table-index">
                                {{ scope.$index + 1 }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        fixed="left"
                        prop="type_name"
                        show-overflow-tooltip
                        label="资源名称"
                    />
                    <el-table-column
                        prop="resource_count"
                        label="资源数量"/>
                    <el-table-column
                        prop="type_status"
                        show-overflow-tooltip
                        label="状态"
                    >
                        <template slot-scope="scope">
                            <template v-if="scope.row.type_status == 1">正常</template>
                            <template v-if="scope.row.type_status == 0">已下架</template>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="create_time"
                        label="创建时间"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.create_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                        </template>
                    </el-table-column>

                    <el-table-column
                        prop="sort"
                        label="排序">
                        <template slot-scope="scope">
                            <span>{{ scope.row.type_sort }}</span>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i
                                class="iconfont icon-bianji"
                                @click="fnEdit(scope.row.type_no, 'sort', scope.row.type_sort)"/>
                        </template>
                    </el-table-column>

                    <el-table-column
                        prop="sort"
                        label="报价倍数">
                        <template slot-scope="scope">
                            <span>{{ scope.row.type_price_rate }}</span>
                            &nbsp;&nbsp;|&nbsp;&nbsp;
                            <i
                                class="iconfont icon-bianji"
                                @click="fnEdit(scope.row.type_no, 'rate', scope.row.type_price_rate)"/>
                        </template>
                    </el-table-column>

                    <el-table-column
                        prop="sort"
                        width="110px"
                        label="广告主端显示">
                        <template slot-scope="scope">
                            <template v-if="scope.row.type_show_hire == 1">显示</template>
                            <template v-if="scope.row.type_show_hire == 0">隐藏</template>
                        </template>
                    </el-table-column>

                    <el-table-column
                        prop="date"
                        label="操作"
                        fixed="right"
                        :width="180"
                    >
                        <template slot-scope="scope">
                            <div>
                                <el-button
                                    type="text"
                                    @click="handleRoute('resourceTypeEdit', { type_no
                                    : scope.row.type_no })"
                                >编辑</el-button>
                                <el-button
                                    type="text"
                                    style="margin-left:0;"
                                    @click="handleRoute('advancedSettings', { type_no
                                    : scope.row.type_no })"
                                >高级设置</el-button>
                                <el-dropdown
                                    trigger="click">
                                    <span class="el-dropdown-link">
                                        更多<i class="el-icon-arrow-down el-icon--right"/>
                                    </span>
                                    <el-dropdown-menu
                                        slot="dropdown"
                                        class="operate-dropdown">
                                        <el-dropdown-item>
                                            <el-button
                                                type="text"
                                                v-if="scope.row.type_status == 1"
                                                @click="fnSetStatus(scope.row.type_no, 0)"
                                            >下架</el-button>
                                            <el-button
                                                type="text"
                                                v-else-if="scope.row.type_status == 0"
                                                @click="fnSetStatus(scope.row.type_no, 1)"
                                            >上架</el-button>
                                        </el-dropdown-item>
                                        <el-dropdown-item>
                                            <a
                                                :href="base + '/wei4/resource_type%5Cdemo_csv?type_no=' + scope.row.type_no + '&__ticket=' + ticket"
                                                target="_blank">
                                                <el-button
                                                    type="text"
                                                >示例Demo</el-button>
                                            </a>
                                        </el-dropdown-item>
                                        <el-dropdown-item>
                                            <el-button
                                                type="text">
                                                <label>
                                                    导入资源
                                                    <input
                                                        type="file"
                                                        @change="e=> {fnUploadExcelData(e, scope.row.type_no)}"
                                                        style="display: none;">
                                                </label>
                                            </el-button>
                                        </el-dropdown-item>
                                        <el-dropdown-item>
                                            <a
                                                :href="base + '/wei4/resource_type%5Cexport_resource?type_no=' + scope.row.type_no + '&__ticket=' + ticket"
                                                target="_blank">
                                                <el-button
                                                    type="text"
                                                >导出资源</el-button>
                                            </a>
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            authResult: {},
            bidStatus: 1,
            taskTitleList: [],
            tableData: [],
            filterData: {
                title: ''
            },
            sortData: {
                field: 0,
                by: 1
            },
            typeNo: '',
            base: '',
            ticket: ''
        };
    },
    created() {
        this.authResult = this.$route.meta.authResult;
        this.$store.commit('SET_HEADER', [
            {
                title: "广告系统",
            },
            {
                title: '资源类型列表'
            }
        ]);
        this.getTableData();
        this.base = this.$baseUrl;
        this.ticket = localStorage.getItem('sessionTicket');

    },
    methods: {
        handleCommand(command) {
            this.$message('click on item ' + command);
        },
        fnUploadExcelData(e, type_no) {
            let formData = new FormData();

            formData.append('type_no', type_no);
            formData.append('csv_file', e.target.files[0]);

            this.$post('/wei4/resource%5Cupload', formData, resp => {
                if (resp.code == 1) {
                    this.getTableData();
                    this.$message({
                        type: 'success',
                        center: true,
                        message: '操作成功'
                    });
                }
            });
        },
        /** 获取表格数据 */
        getTableData(page) {
            this.$post('/wei4/resource_type%5Cget_list', {}, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                }
            });
        },

        fnSetStatus(typ_no, status) {
            this.$post('/wei4/resource_type%5Cstatus', {
                type_no: typ_no,
                type_status: status
            }, resp => {
                if (resp.code == 1) {
                    this.$message({
                        type: 'success',
                        center: true,
                        message: '操作成功'
                    });
                    this.getTableData();
                } else {
                    this.$message({
                        type: 'success',
                        center: true,
                        message: '操作成功'
                    });
                }
            });
        },

        /** 跳转页面 */
        handleRoute(name, query) {
            let obj = {
                name
            };

            if (query) {
                obj.query = query;
            }

            this.$router.push(obj);
        },

        /** 列表渲染辅助函数：列表项为空处理 */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        },
        fnResourceTypeModify(type_no, value, type) {
            let data = {};

            if(type == 'sort') {
                data = {
                    type_no: type_no,
                    type_sort: value,
                };
            }else if(type == 'rate') {
                data = {
                    type_no: type_no,
                    type_price_rate: value
                };
            }

            this.$post('/wei4/resource_type%5Cmodify', data, resp => {
                if(resp.code == 1) {
                    this.$message({
                        type: 'success',
                        message: '操作成功'
                    });
                    this.getTableData();
                }else{
                    this.$message({
                        type: 'warning',
                        message: resp.msg
                    });
                }
            });
        },
        fnEdit(type_no, type, val) {
            if(type == 'sort') {
                this.$prompt('数字越小，排序越靠前', '排序', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    center: true,
                    inputValue: val,
                    customClass: 'sort-dialog',
                    inputPattern: /^\d{1,5}$/,
                    inputErrorMessage: '请输入正确的排序序号'
                }).then(({ value }) => {
                    this.fnResourceTypeModify(type_no, value, type);
                }).catch((e) => {
                    console.log(e);
                });
            }else{
                this.$prompt('请输入报价倍数', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputValue: val,
                    center: true,
                    customClass: 'sort-dialog',
                    inputPattern: /^(-?\d+)(\.\d+)?$/,
                    inputErrorMessage: '请输入正确的报价倍数'
                }).then(({ value }) => {
                    this.fnResourceTypeModify(type_no, value, type);
                }).catch((e) => {
                    console.log(e);
                });
            }
        },
    }
};
</script>

<style lang="less" scoped>
  .container {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .operation-wrapper {
    display: flex;
    flex-direction: row-reverse;
    padding: 12px 23px;
    background-color: #fff;

    .el-button {
      margin-left: 10px;
    }
  }
  .content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 15px;
    overflow: hidden;
  }
  .search-wrapper {
    padding: 15px;
    background-color: #fff;
  }
  .filter-item {
    .el-form-item {
      margin-bottom: 0;
      white-space: nowrap;
    }
    .el-input {
      width: auto;
      vertical-align: middle;
    }
    .el-button {
      margin-left: 15px;
      vertical-align: middle;
    }
  }
  .table-wrapper {
    flex: 1;
    background-color: #fff;

    .el-button {
      padding: 0;
    }
    .icon-bianji {
      font-size: 14px;
      color: #b9b9b9;
      cursor: pointer;
    }
    .btn-delete {
      color: #fd4d32;
      &.is-disabled {
        color: #c0c4cc;
        cursor: not-allowed;
      }
    }
    .submit-config-item {
      display: inline-block;
      position: relative;
      padding-right: 10px;
      font-size: 14px;

      & + .submit-config-item {
        padding-left: 10px;
        &::before {
          content: "";
          position: absolute;
          top: 50%;
          left: 0;
          width: 1px;
          height: 14px;
          transform: translate(0, -50%);
          background-color: #d8d8d8;
        }
      }

      .num {
        vertical-align: middle;
      }
      .iconfont {
        font-size: 16px;
        color: #b9b9b9;
        vertical-align: middle;
      }

      .icon-tupian {
        font-size: 20px;
      }
    }
  }
  .pagination-wrapper {
    padding-top: 10px;
    .el-pagination {
      float: right;
      padding: 0;
      background-color: transparent;
    }
  }
  .dialog-link {
    & + .dialog-link {
      margin-top: 20px;
    }
    .link-label {
      font-weight: 500;
      margin-right: 20px;
    }
    .link-value {
    }
  }
</style>
<style lang="less">
//   .resource-type-lsit-wrap {
//     tbody {
//       .cell {
//         display: flex;
//         align-items: center;
//         height: 48px;
//       }
//     }
//   }
  .task-list-preview-popover {
    min-width: auto !important;
    width: 120px !important;
    height: 120px;
    padding: 8px !important;
  }
  .sort-dialog {
    width: 270px !important;
  }
  .operate-dropdown{
      .el-dropdown-menu__item{
          padding-left: 0;
          padding-right: 0;
          .el-button{
              padding: 8px 20px;
              display: block;
              width: 100%;
          }
      }
  }
</style>
